<template>
    <view class="stateCityWrap">
        <cu-custom isBack="false" textColor='#212121' fhColor='#D1D1D1' xbgColor='#ffffff'>
            <!--            <block slot="backText"></block>-->
            <block slot="content">选择城市</block>
        </cu-custom>
        <!-- 搜索 -->
        <view class="screenWrap" :style="{top: CustomBar+'px'}">
            <view class="screen">
                <!-- <image class="img" :src="imgUrl+gameDetailsData.shopping_index_sousuo" v-if="gameDetailsData"></image> -->
                <image class="img" :src="imgUrl+'/static/search.png'"></image>
                <view class="line"></view>
                <input type="text" placeholder="输入城市名或拼音查询" class="text" v-model="searchValue"
                       @input="searchValueChange">
                <image class="delBtn"
                       :src="'https://bkmmain.oss-cn-hangzhou.aliyuncs.com/static/new_shoppingMall/screenDel_ptcg.png'"
                       @click.stop="searchValueDel" v-if="searchValue"></image>
                <view class="screenBtn" @click="okScreenBtn('')">搜索</view>
                <view class="showCityList" v-if="screenCityList.length>0"
                      :style="{height: Number(height-CustomBar)+'px'}">
                    <view class="hotCityBox">
                        <view class="hotCityTitle">搜索结果</view>
                        <view class="hotCityListBox">
                            <view class="list" v-for="(item,index) in screenCityList" :key='index'
                                  @click="activeCity(item)">
                                <view class="texta">{{ item.fullName }}</view>
                            </view>
                        </view>
                    </view>
                    <!-- 字体标红 -->
                    <!-- <view class="list" v-for="(item,index) in screenCityList" :key='index' @click="activeCity(item)">
                        <view class="text" v-if="item.contain">
                            <view>{{item.start}}</view>
                            <view class="intro">{{item.middle}}</view>
                            <view>{{item.end}}</view>
                        </view>
                        <view class="text" v-else>{{item.name}}</view>
                    </view> -->
                </view>
            </view>
            <block v-if="screenCityList.length==0">
                <view class="cityTitle">当前定位</view>
                <view class="cityDetails">
                    <image class="img"
                           :src="imgUrl + '/static/stateCityImg.png'"></image>
                    <view class="text">{{ cityName }}</view>
                    <view class="btn" @click="anewLocation">重新定位</view>
                </view>
            </block>
        </view>
        <block v-if="screenCityList.length==0">
            <scroll-view scroll-y :style="{height:height-CustomBar+'px'}" style="-webkit-overflow-scrolling: touch;"
                         :scroll-into-view="stateCityTitle" scroll-with-animation class="container">
                <view class="cityListBox">
                    <view class="hotCityBox">
                        <view class="hotCityTitle">热门城市</view>
                        <view class="hotCityListBox">
                            <view class="list" v-for="(item,index) in hotCity" :key='index'
                                  @click="activeCity(item,'hot')">
                                <view class="text">{{ item.cityName }}</view>
                            </view>
                        </view>
                    </view>
                    <view class="cityList">
                        <view class="list" v-for="(item,index) in cityList" :key='index'>
                            <view class="listTitle" :id="item.name">{{ item.name }}</view>
                            <view class="listDetails" v-for="(itema,indexa) in item.cityList" :key='indexa'
                                  @click="activeCity(itema)">
                                {{ itema.fullName }}
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
            <view class="rightListBox">
                <view class="list" v-for="(item,index) in cityList" :key='index' @click.stop="skipList(item.name)">
                    {{ item.name }}
                </view>
            </view>
        </block>
    </view>
</template>

<script>
// 省市区记录
import cityListDetails from "../../static/lib/cityList.js"

export default {
    data() {
        return {
            height: '',
            // 导航栏距离
            StatusBar: this.StatusBar,
            CustomBar: this.CustomBar,
            imgUrl: this.$http.imgUrl,

            // 搜索结果
            searchValue: '',

            // 跳转对象
            stateCityTitle: '',

            cityList: [],

            // 地址
            lng: '',
            lat: '',
            cityName: '',

            // 热门地址
            hotCity: [],
            // 筛选地址
            screenCityList: []
        }
    },
    onLoad() {
        this.lng = uni.getStorageSync('lng')
        this.lat = uni.getStorageSync('lat')
        this.cityName = uni.getStorageSync('cityName')
        this.height = uni.getSystemInfoSync().windowHeight
        this.cityList = cityListDetails.cityList

        var index = this.cityList.length
        while (index--) {
            if (this.cityList[index].cityList.length == 0) {
                this.cityList.splice(index, 1)
            }
        }
        this.hotCityData()

        // 筛选地址
        // let list = [{}];
        // for (let i = 0; i < 26; i++) {
        // 	list[i] = {};
        // 	list[i].name = String.fromCharCode(65 + i);
        // 	list[i].id = i;
        // 	list[i].cityList = []
        // }
        // this.list = list;
        // this.listCur = list[0];

        // var a = []
        // for (var i in cityListDetails.cityList) {
        // 	cityListDetails.cityList[i].pinyina = JSON.parse(cityListDetails.cityList[i].pinyin)
        // 	cityListDetails.cityList[i].pyText = ''
        // 	cityListDetails.cityList[i].pyTexta = ''
        // 	for (var j in cityListDetails.cityList[i].pinyina) {
        // 		cityListDetails.cityList[i].pyText += cityListDetails.cityList[i].pinyina[j]
        // 		cityListDetails.cityList[i].pyTexta += cityListDetails.cityList[i].pinyina[j].slice(0, 1)
        // 	}
        // 	for (var j in this.list) {
        // 		if (this.list[j].name == (cityListDetails.cityList[i].pinyina[0].substr(0, 1)).toUpperCase()) {
        // 			this.list[j].cityList.push(cityListDetails.cityList[i])
        // 		}
        // 	}
        // }
        // console.log(JSON.stringify(this.list), 333)
    },
    methods: {
        // 热门地址
        async hotCityData() {
            const url = this.api.new_shop.hotCity
            let details = await this.$http.get(url)
            this.hotCity = details.data.data
            console.log(this.hotCity, '热门地址')
        },

        // 选择搜索
        okScreenBtn() {
            if (!this.searchValue.trim()) {
                return
            }
            this.searchValue = this.searchValue.toLowerCase()
            var arr = []
            var cityList = this.cityList
            for (var i in cityList) {
                for (var j in cityList[i].cityList) {
                    if (cityList[i].cityList[j].fullName.indexOf(this.searchValue) != -1 || cityList[i].cityList[j]
                        .pyText.indexOf(this.searchValue) != -1 || cityList[i].cityList[j].pyTexta.indexOf(this
                        .searchValue) != -1) {
                        arr.push(cityList[i].cityList[j])
                    }
                }
            }
            this.screenCityList = arr
            // this.screenCityList.map((item, index) => {
            // 	this.signKeyword(item.fullName, index)
            // })
        },
        signKeyword(val, index) {
            let keyword = this.searchValue //搜索的值
            if (val.indexOf(keyword) !== -1) {
                // 包含字符前面的下标
                let pre = val.indexOf(keyword)
                // 包含字符的长度
                let end = keyword.length
                this.screenCityList[index].contain = true
                // 截取之前的字符
                this.screenCityList[index].start = val.slice(0, pre)
                // 中间包含
                this.screenCityList[index].middle = keyword
                // 截取之后的字符（包含字符前面的下标+包含字符的长度 = 包含字符之后的下标）
                this.screenCityList[index].end = val.substr(pre + end)
            } else {
                this.screenCityList[index].contain = false
            }
        },

        // 输入地址改变
        searchValueChange() {
            if (!this.searchValue.trim()) {
                this.screenCityList = []
                return
            }
        },

        // 选择当前地址
        activeCity(item, itemText) {
            if (itemText == 'hot') {
                var cityList = this.cityList
                for (var i in cityList) {
                    for (var j in cityList[i].cityList) {
                        if (cityList[i].cityList[j].adCode == item.adCode) {
                            console.log(cityList[i].cityList[j], '匹配得热门城市数据')
                            uni.getSetting({
                                success(set) {
                                    if (set.authSetting['scope.userLocation'] === undefined || set.authSetting[
                                        'scope.userLocation'] === true) {
                                        uni.getLocation({
                                            type: 'gcj02',
                                            success: function (res) {
                                            },
                                            fail(res) {

                                            }
                                        });
                                    } else {
                                        uni.openSetting({
                                            success() {
                                                uni.navigateBack()
                                            },
                                            fail(err) {
                                                console.log(err)
                                            }
                                        })
                                    }
                                }
                            })
                            // 经度
                            uni.setStorageSync('lng', cityList[i].cityList[j].lng)
                            // 纬度
                            uni.setStorageSync('lat', cityList[i].cityList[j].lat)
                            // 当前地址
                            uni.setStorageSync('cityName', cityList[i].cityList[j].fullName)
                            // 当前adCode
                            uni.setStorageSync('adCode', cityList[i].cityList[j].adCode)
                            this.lng = cityList[i].cityList[j].lng
                            this.lat = cityList[i].cityList[j].lat
                            this.cityName = cityList[i].cityList[j].fullName
                            uni.navigateBack()
                            return
                        }
                    }
                }
                return
            }
            // 经度
            uni.setStorageSync('lng', item.lng)
            // 纬度
            uni.setStorageSync('lat', item.lat)
            // 当前地址
            uni.setStorageSync('cityName', item.fullName)
            // 当前adCode
            uni.setStorageSync('adCode', item.adCode)
            this.lng = item.lng
            this.lat = item.lat
            this.cityName = item.fullName
            uni.navigateBack()
        },

        // 重新定位
        anewLocation() {
            const that = this
            uni.getSetting({
                success(set) {
                    if (set.authSetting['scope.userLocation'] === undefined || set.authSetting[
                        'scope.userLocation'] === true) {
                        uni.getLocation({
                            type: 'gcj02',
                            success: function (res) {
                                uni.setStorageSync('lng', res.longitude)
                                uni.setStorageSync('lat', res.latitude)
                                that.cityJWD()
                                return
                            },
                            fail(res) {

                            }
                        });
                    } else {
                        uni.openSetting({
                            success() {
                                uni.navigateBack()
                            },
                            fail(err) {
                                console.log(err)
                            }
                        })
                    }
                }
            })
        },

        // 获取经纬度
        async cityJWD() {
            const url = this.api.new_shop.newCity
            let res = await this.$http.get(url, {
                lng: uni.getStorageSync('lng'),
                lat: uni.getStorageSync('lat'),
                searchType: 1,
            })
            let details = res.data.data
            if (res.data.code != 200) {
                uni.showToast({
                    title: res.data.message,
                    icon: 'none',
                });
                return
            }
            uni.setStorageSync('lng', details.lng)
            uni.setStorageSync('lat', details.lat)
            uni.setStorageSync('cityName', details.fullName)
            uni.setStorageSync('adCode', details.adCode)
            this.lng = details.lng
            this.lat = details.lat
            this.cityName = details.fullName
            console.log(details, '获取经纬度详情')
        },

        // 删除搜索输入记录
        searchValueDel() {
            this.searchValue = ''
            this.screenCityList = []
        },

        // 跳转地址列表
        skipList(id) {
            this.stateCityTitle = String(id)
        },
    }
}
</script>

<style scoped lang="scss">
.screenCityListYs {
  height: 100vh;
  background-color: #fff;
}

.stateCityWrap {

  // 搜索
  .screenWrap {
    width: 100%;
    position: fixed;
    z-index: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    height: 248rpx;
    padding: 20rpx 24rpx;

    .screen {
      width: 700rpx;
      height: 64rpx;
      background: rgba(0, 12, 39, 0.05);
      border-radius: 38rpx;
      display: flex;
      align-items: center;
      padding-left: 24rpx;
      position: relative;

      .img {
        width: 40rpx;
        height: 40rpx;
        margin-right: 8rpx;
      }

      .line {
        width: 2rpx;
        height: 40rpx;
        background: rgba(153, 153, 153, 0.2);
        border-radius: 2rpx;
        margin-right: 16rpx;
        margin-left: 16rpx;
      }

      .text {
        font-size: 24rpx;
        color: rgba(0, 0, 0, 0.8);
        flex: 1;
      }

      .delBtn {
        width: 40rpx;
        height: 40rpx;
        margin: 20rpx;
      }

      .screenBtn {
        width: 120rpx;
        height: 56rpx;
        background: #4D8BFF;
        border-radius: 28rpx;
        font-size: 24rpx;
        font-weight: bold;
        color: #fff;
        line-height: 56rpx;
        text-align: center;
        margin-right: 8rpx;
      }

      .showCityList {
        position: absolute;
        width: 750rpx;
        left: -24rpx;
        top: 64rpx;
        background-color: #fff;
        overflow-y: auto;
        padding: 0 24rpx;

        .hotCityBox {
          // padding-top: 24rpx;
        }

        .hotCityTitle {
          font-size: 26rpx;
          color: rgba(0, 0, 0, 0.4);
          background-color: #fff;
          padding: 24rpx 0 26rpx;
          position: sticky;
          top: 0;
        }

        .hotCityListBox {
          display: flex;
          flex-wrap: wrap;
          padding: 0 25rpx;

          .list {
            width: 33.33%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 16rpx;

            .texta {
              width: 196rpx;
              height: 68rpx;
              border-radius: 4rpx;
              border: 2rpx solid rgba(0, 12, 39, 0.05);
              font-size: 28rpx;
              color: rgba(0, 0, 0, 0.8);
              text-align: center;
              line-height: 68rpx;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              padding: 0 10rpx;
            }
          }
        }

        // .list {
        // 	border-bottom: 1px solid rgba(0, 12, 39, 0.05);
        // 	height: 60rpx;
        // 	line-height: 60rpx;

        // 	.text {
        // 		display: flex;
        // 		font-size: 28rpx;

        // 		.intro {
        // 			color: #DC3E3F;
        // 		}
        // 	}
        // }
      }
    }

    .cityTitle {
      font-size: 26rpx;
      color: rgba(0, 0, 0, 0.4);
      margin-top: 24rpx;
    }

    .cityDetails {
      display: flex;
      align-items: center;
      margin-top: 36rpx;

      .img {
        width: 32rpx;
        height: 32rpx;
        margin-right: 6rpx;
      }

      .text {
        font-size: 30rpx;
        font-weight: bold;
        color: #1B1B2A;
        flex: 1;
      }

      .btn {
        font-size: 26rpx;
        color: #4D8BFF;
      }
    }
  }

  // 内容
  .container {
    padding-top: 266rpx;
  }

  // 列表数据
  .cityListBox {
    background-color: #fff;
    padding: 24rpx;

    // 热门城市
    .hotCityBox {
      .hotCityTitle {
        font-size: 26rpx;
        color: rgba(0, 0, 0, 0.4);
        margin-bottom: 26rpx;
      }

      .hotCityListBox {
        display: flex;
        flex-wrap: wrap;
        padding: 0 25rpx;

        .list {
          width: 33.33%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 16rpx;

          .text {
            width: 196rpx;
            height: 68rpx;
            border-radius: 4rpx;
            border: 2rpx solid rgba(0, 12, 39, 0.05);
            font-size: 28rpx;
            color: rgba(0, 0, 0, 0.8);
            text-align: center;
            line-height: 68rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 0 10rpx;
          }
        }
      }
    }

    // 城市列表
    .cityList {
      padding-right: 60rpx;

      .list {
        .listTitle {
          font-size: 26rpx;
          color: rgba(0, 0, 0, 0.4);
          height: 84rpx;
          line-height: 84rpx;
        }

        .listDetails {
          height: 84rpx;
          font-size: 28rpx;
          color: #666666;
          border-bottom: 1rpx solid rgba(0, 12, 39, 0.05);
          line-height: 84rpx;
        }
      }
    }
  }

  // 右侧筛选
  .rightListBox {
    padding-top: 366rpx;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translate(-50%, -50%);

    .list {
      font-size: 22rpx;
      color: #666666;
      margin: 10rpx;
    }
  }
}
</style>